<template>
  <div>

	<myheader></myheader>

	<br /><br />

			<!--面包屑导航-->
			<Breadcrumb :datas="datas" ></Breadcrumb>

	

	<section class="featured-block text-center">
		<div class="container">


			<Avatar :src="src" :width='150' fit="fill" ></Avatar>
			<!-- 视频地址 -->
			<video id="video" v-show="videosrc"  width="300" height="200" :src="videosrc" controls="controls" autoplay="autoplay" muted>
				
			</video><br>
				<br>
			<!-- 进入画中画 -->
			<Button @click="changepic"  color="red">{{mybutton}}</Button>
			<br>

			<table>
					<tr >
						<td style="padding:5px;" > 
							
							{{$t('m.password')}}:

						</td>
						<td style="padding:5px;">
							
							<input type="text" v-model="password" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;" >
							
							{{$t('m.cpassword')}}:

						</td>
						<td style="padding:5px;">
							
							<input type="password" v-model="password1" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							{{$t('m.pu')}}:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload" />

						</td>
					</tr>

					<tr>
						<td style="padding:5px;">
							
							{{$t('m.qiniu')}}:

						</td>
						<td style="padding:5px;">
							
							<input type="file" @change="upload_qiniu" />

						</td>
					</tr>


					<tr>
						<td style="padding:5px;">
							
							{{$t('m.process')}}:

						</td>
						<td style="padding:5px;">
							
							{{ loadpercent }}
							
							<Progress v-show="loadpercent_int" :percent="loadpercent_int" color="green">
								<span slot="title">
									<span>{{ loadpercent_int}}%</span>
								</span>
							</Progress>

						</td>
					</tr>
					


					<tr>
						<td style="padding:5px;">
							

						</td>
						<td style="padding:5px;">
							
							<Button @click="submit">{{$t('m.submit')}}:</Button> &nbsp;&nbsp;

						</td>
					</tr>

			</table>
			<div>
				关注商品列表：
				<Checkbox :datas="goods" v-model="good_value"></Checkbox>
			</div>
			<br><br>
			<Button color="green" @click="flow">批量操作</Button>
			
			

		</div>
	</section>
	

	
	
	
	<footer class="footer">

		<div class="container">
			@v3u.cn
		</div>
		
		
	</footer>
    
  </div>
  
</template>


 
<script>

//导包
import myheader from './myheader.vue';
import dragVerify from 'vue-drag-verify';
import {config,formatXml} from '../config.js';

export default {
  data () {
    return {
      msg: "这是一个变量",
      //声明面包屑变量
      datas:[{title:'首页',route:{name:'index'}},{title:'我的首页'}],
      password:'',
      password1:'',
      src:'',
      password:"",
	  password1:"",
	  //七牛上传凭证
	  uptoken:"",
	  //视频地址
	  videosrc:"",
	  loadpercent:"",
	  //整型
	  loadpercent_int:0,
	  //切换按钮变量
	  mybutton:"进入画中画",
	  //商品关注列表
	  goods:[],
	  good_value:[],
	  myid:{}
	 
	 

    }
  },
  //注册组件标签
  components:{
  		'myheader':myheader
  },
  mounted:function(){
	  
	    //获取用户信息
		this.get_uptoken()
		//获取关注商品列表
		  this.get_goods()
		//发送请求
  		this.axios.get('http://127.0.0.1:8000/userinfo/',{params:{uid:localStorage.getItem("uid")}}).then((result) =>{

						  console.log(result);
						  //视频地址
			  this.videosrc = 'http://q7afsq8ms.bkt.clouddn.com/' + result.data.img;


		  }); 
		  
	  

   
  
},
  methods:{
	  //批量操作
	  flow:function(){
		  console.log(this.myid)
		  console.log(this.good_value)

		  var goods =[]



		    for(let i=0,l=this.good_value.length;i<l;i++){
							  goods.push(this.myid[this.good_value[i]])
								
						  }

		  var glist = JSON.stringify(goods)
		  console.log(glist)


		  		this.axios.get('http://127.0.0.1:8000/getflow/',{params:{"uid":localStorage.getItem("uid"),ids:glist,type:2}}).then((result) =>{

  						console.log(result);

  						//赋值操纵
		
						  this.$Message(result.data.message)

  		});

	  },
	  //获取关注商品
	  get_goods:function(){
		  	this.axios.get('http://127.0.0.1:8000/uidflow/',{params:{"uid":localStorage.getItem("uid")}}).then((result) =>{

						  console.log(result);
						  var goods=[]

						  for(let i=0,l=result.data.length;i<l;i++){
							  goods.push(result.data[i].name)
								this.myid[result.data[i].name] = result.data[i].id
						  }

						  //赋值
						  this.goods = goods
						  this.good_value = goods    //这个没等于goods就是空的    等于全打勾   goods_value没有值  
						  console.log(goods)

  						

  		});


	  },
	  //定义画中画切换
	  changepic:function(){
		  //判断是否处于画中画界面
		  if(video !== document.pictureInPictureElement){
			  //尝试进入画中画
			  video.requestPictureInPicture();
			  this.mybutton = "退出画中画"


		  }else{
			  //退出画中画
			  document.exitPictureInPicture()
			  this.mybutton = "进入画中画"
		  }

	  },
  

      

  	//提交
  	submit:function(){
          if(this.password===""){ 
              this.$Message("密码不能为空")
              return false
          }
          if(this.password1===""){
              this.$Message("密码2不能为空")
              return false
          }
        
          //发送请求
          this.axios.get('http://127.0.0.1:8000/updateps/',{params:{uid:localStorage.getItem('uid'),password:this.password}}).then((res) =>{

			if (res.data.code === 200) {
            this.$Message(res.data.message);
            this.$router.push('/')
          } else {
            this.$Message(res.data.data)
          }
		});
          

	  },
	  //获取七牛云凭证
	  get_uptoken(){
		  //发送请求
  		this.axios.get('http://127.0.0.1:8000/uptoken/').then((result) =>{

  						console.log(result);

  						//赋值操纵
  						this.uptoken = result.data.token 

  		});

	  },


   
	  //上传七牛
	  upload_qiniu:function(e){

		  console.log(this.uptoken)

		  //获取文件对象
		  let file = e.target.files[0];
		  //声明参数
		  let param = new FormData()
		  //将上传凭证添加参数
		  param.append('token',this.uptoken);

		  //附加文件
		  param.append('file',file)

		  //定制化axios  不能带cookie
		  const axios_qiniu = this.axios.create({withCredentials:false})
		  //发送请求
		  axios_qiniu({
			  method:"POST",
			  url:"http://up-z1.qiniu.com/",
			  data:param,
			  timeout:30000,

		
			  //设置上传进度
			  onUploadProgress:(e) => {
				  //设置总进度对象 已上传的字节数 / 总字节数
				  var complete = (e.loaded / e.total);

				  //安慰剂按钮
				  if(complete <1){
					  this.loadpercent = (complete * 100).toFixed(2) + "%"
					  //第二个
					  this.loadpercent_int = parseInt((complete * 100).toFixed(2))
				  }
			  }
		  }).then(result =>{
			  console.log(result)
			  //赋值
			  this.src = 'http://q7afsq8ms.bkt.clouddn.com/' + result.data.key;
			  //视频地址
			  this.videosrc = 'http://q7afsq8ms.bkt.clouddn.com/' + result.data.key;
			  
			  //发送请求
  		this.axios.get('http://localhost:8000/updateuser/',{params:{uid:localStorage.getItem("uid"),img:result.data.key}}).then((result) =>{

  						console.log(result);


  		});
			 
			 //上传成功后
			  this.loadpercent = "100%" ;
			  this.loadpercent_int = 100

		  }).catch(result =>{
			  console.log(result)
		  })

	  },
	 
		  





  	//提交
  	upload:function(e){

  		//获取文件对象
  		let file = e.target.files[0];

  		//声明参数
  		let param = new FormData();

  		//添加文件
  		param.append('file',file,file.name);

  		//声明请求头
  		let config = {headers:{'Content-Type':'multipart/form-data'}};

  		//发送请求
  		this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{

  						console.log(result);

  						//赋值操纵
  						this.src = 'http://localhost:8000/static/upload/' + result.data.filename;

  		});

  	}

     
  }
}


</script>

<style>



</style>